<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/xhtml/templates/layout.xhtml">

	<ui:define name="title">#{msgs.Agenda_tabTitle}</ui:define>

	<ui:define name="entete">
		<h:form id="enteteForme" styleClass="container-vertically-centered">
			<p:toolbar id="enteteTolBar" style="height: 30px;">
				<p:toolbarGroup id="enteteTolBarGroup" align="left" >
					<h:outputText value="#{msgs.Agenda_title}"/>
				</p:toolbarGroup>
			</p:toolbar>
		</h:form>
	</ui:define>

	<ui:define name="layoutTest">
			<p:layout styleClass="myLayoutStyleClass" style="min-width: 100px; min-height: 796px; margin-bottom: 0.50%; margin-top: 0.50%" id="layout" >

			<p:layoutUnit position="west" size="770" header="#{msgs.Agenda_Calendrier_header}" styleClass="myLayoutStyleClass">
				<h:form id="agenda_calendrierFormateurForm" styleClass="container-vertically-centered">
					<p:growl id="messages" showDetail="true" />
					<h:panelGrid id="agenda_calendrierFormateurGrid" style="margin-top: 0.50%;">
						<p:calendar value="#{manageBeanAgenda.service.maDate}" mode="inline" pages="4" onSelectUpdate="testS" style="font-size: 11px;" />
						<p:commandButton oncomplete="dialog.show()" value="#{msgs.Agenda_Calendrier_bouton}" update="testS" ajax="false" />
					</h:panelGrid>
				</h:form>

				<p:toolbar id="t" style="height: 20px; text-align:center; margin-top: 10%;" >
					<p:toolbarGroup id="ta" align="left">
						<h:outputText value="#{msgs.Agenda_Calendrier_recapitulatifAgenda}" />
					</p:toolbarGroup>
				</p:toolbar>

				<h:form>
					<h:panelGrid id="testg">
						<p:dataTable id="agenda_tableDatatTable" rowKey="#{agenda.key}" var="agenda" value="#{manageBeanAgenda.service.all}" style="width: 754px; margin-top: 1%;">

							<f:facet name="header">
            					<h:outputText value="#{msgs.Agenda_Agenda_tableHeader}" />
  							</f:facet>
  							
  							<p:column headerText="ID Planning">
								<h:outputText value="#{agenda.idPlanning}" />
							</p:column>
  							
  							<p:column headerText="#{msgs.Agenda_Agenda_tableHeaderTextUser}">
								<h:outputText value="#{agenda.user}" />
							</p:column>

							<p:column headerText="#{msgs.Agenda_Agenda_tableHeaderTextNom}">
								<h:outputText  />
							</p:column>

							<p:column headerText="#{msgs.Agenda_Agenda_tableHeaderTextPrenom}">
								<h:outputText  />
							</p:column>

							<p:column headerText="#{msgs.Agenda_Agenda_tableHeaderTextSalle}">
								<h:outputText value="#{agenda.salle}" />
							</p:column>

							<p:column headerText="#{msgs.Agenda_Agenda_tableHeaderTextDate}">
								<h:outputText value="#{agenda.startDate}" />
							</p:column>

							<p:column headerText="#{msgs.Agenda_Agenda_tableHeaderTextHeur}">
								<h:outputText value="#{agenda.startHeur}" />
							</p:column>

							<p:column headerText="#{msgs.Agenda_Agenda_tableHeaderTextFormation}">
								<h:outputText value="#{agenda.title}" />
							</p:column>
							
							<p:column headerText="#{msgs.Agenda_Agenda_tableHeaderTextCommentaire}">
								<h:outputText value="#{agenda.commentaire}" />
							</p:column>

							<f:facet name="footer">  
            					<h:outputText value="#{msgs.Agenda_Agenda_tableFooter}" />
  							</f:facet>

						</p:dataTable>
					</h:panelGrid>
				</h:form>
			</p:layoutUnit>

			<p:layoutUnit position="center" style="text-align:center;">
					<h:form>
						<h:panelGrid id="d" style="margin-left: 6%;">
							<p:growl id="messages" showDetail="true" />
							<p:schedule initialDate="#{manageBeanAgenda.service.maDate}" view="agendaDay" id="testS" style="width: 965px;" value="#{manageBeanAgenda.service.eventModel}" editable="true" widgetVar="myschedule">

								<p:ajax event="dateSelect" listener="#{manageBeanAgenda.service.onDateSelect}" update="eventDetails" oncomplete="eventDialog.show()" />
								<p:ajax event="eventSelect" listener="#{manageBeanAgenda.service.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" />

							</p:schedule>
						</h:panelGrid>
						<p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
							<h:panelGroup id="eventDetails">
								<h:panelGrid id="eventDetails1" columns="2">

								<h:outputLabel for="id" value="Id:" style="margin-left: -25px;" />
								<p:inputText id="id" value="#{manageBeanAgenda.agenda.idPlanning}" style="margin-left: -555px; Width: 245px;" />

								<h:outputLabel for="user" value="User:" style="margin-left: -25px;" />
								<p:inputText id="user" value="#{manageBeanAgenda.agenda.user}" style="margin-left: -555px; Width: 245px;" />
								
								<h:outputLabel for="salle" value="salle:" style="margin-left: -25px;" />
								<p:inputText id="salle" value="#{manageBeanAgenda.agenda.salle}" style="Width: 800px;" />
								
								<h:outputLabel for="title" value="Formation:" />
								<p:inputText id="title" value="#{manageBeanAgenda.service.event.title}" style="Width: 800px;" />
								
								</h:panelGrid>
								<h:panelGrid id="eventDetails3" columns="4">
								
								<h:outputLabel for="from" value="Date:" />
								<p:inputMask id="from" mask="99/99/9999" value="#{manageBeanAgenda.service.event.startDate}" style="margin-left: 25px; Width: 100px;">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</p:inputMask>
								
								<h:outputLabel for="heur" value="Heur:" />
								<p:inputText id="heur" value="#{manageBeanAgenda.service.startHeur}" style="Width: 100px;" />
								
								</h:panelGrid>
								
								<p:inputTextarea value="#{manageBeanAgenda.agenda.commentaire}" rows="6" cols="33" style="Width: 857px; height: 400px;" /> 
								
								</h:panelGroup>						
							<h:panelGrid id="dgfhhg" columns="2">

								<p:commandButton type="reset" value="Reset" />
								<p:commandButton value="Save" oncomplete="myschedule.update();eventDialog.hide();" action="#{manageBeanAgenda.addEvent}" ajax="false" />

							</h:panelGrid>
						</p:dialog>
					</h:form>
				</p:layoutUnit>
			</p:layout>		
	</ui:define>
	
	<ui:define name="pieddepage">
		<h:form id="pieddepageForm" styleClass="container-vertically-centered">
			<p:toolbar id="pieddepageTolBar" style="height: 30px;">
				<p:toolbarGroup id="pieddepageTolBarGroup" align="left">
					<h:outputText value="#{msgs.Agenda_underTitle}" />
				</p:toolbarGroup>
			</p:toolbar>
		</h:form>
	</ui:define>

</ui:composition>